<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/03.css">
</head>
<body>
    <!-- css 选择器 也被叫做 el - element select 选择器 -->
    <!-- 选择提供在对应的语法环境完成元素的加载操作 -->
    <h3>基本选择</h3>
    <h4>1. 通配符选择器[权重值0](不要使用-存在部分浏览器使用通配符会降低加载消息) * : 匹配查找所有元素</h4>
    <hr>

    <h4>2. 标签选择器[权重值1](不建议单独使用) : 对指定标签进行统一样式设置</h4>
    <p>tips : 标签选择包含 w3c 规范 html标签和自定义标签</p>
    <ul>
        <li>内容1</li>
        <li>内容2</li>
        <li>内容3</li>
        <li>内容4</li>
        <li>内容5</li>
    </ul>
    <itany>自定义标签</itany>
    <hr>

    <h4>3. 类选择器[权重值10](大量使用的选择器) : 选择标签具有class属性,且属性值中包含该类名的元素</h4>
    <p>类选择器的语法 .类名{}</p>
    <p>标签在构建class属性时,可以通过 空格 分割多个类名 , 为标签提供多个类样式</p>
    <p>当标签class存在样式重复的情况,样式的呈现结果取决于样式优先级</p>
    <div class="a fs">类型选择器测试</div>
    <div class="b fs fw">类型选择器测试</div>
    <div class="a b fs">类型选择器测试</div>
    <hr>

    <h4>4. ID选择器[权重值100](小范围使用的选择器) : 通过标签属性 id 和器取值为查找依据,选择标签元素</h4>
    <p>ID选择在css的规范中是属于全页面的匹配,不关心ID唯一性</p>
    <p>css通过ID选择器实现精准元素选择功能,是由程序员自己在标签定义时构成</p>
    <p>ID选择器的语法 #id值{}</p>
    <p id="p-dom">id选择器测试</p>
<!--    <p id="p-dom">id选择器测试</p>-->
<!--    <p id="p-dom">id选择器测试</p>-->
<!--    <p id="p-dom">id选择器测试</p>-->
    <h4>当一个元素存在多种选择器,且存在样式重复时,样式的载入规则是什么?</h4>
    <span class="span" id="span-dom">测试多选择样式定义</span>
    <br><br>
</body>
</html>